<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折叠菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            border:none;
        }
        .box{
            width: 320px;
            margin:100px auto;
            border-radius: 10px;
            border:1px solid #ccc;

        }
        .box .first>li{
            width:320px;
            line-height: 45px;
            text-indent: 10px;


        }
        .box .first>li span{
            width: 16px;
            height: 16px;
            float: right;
            background: url("images/arrow_right.png");
            position: relative;
            right:5px;
            top:8px;
            transition: 0.2s;


        }
        .box .cur span{
            transform: rotate(90deg);

        }
        .sec{
            display: none;
            background: #333;
        }
        .sec li{
            color:white;
        }
        .sec li:hover{
            background: orangered;
        }

    </style>
</head>
<body>
<div class="box">
    <ul class='first'>
        <li><span></span>第一级菜单1
            <ul class='sec'>
                <li>第二级菜单1</li>
                <li>第二级菜单2</li>
                <li>第二级菜单3</li>
                <li>第二级菜单4</li>
                <li>第二级菜单5</li>
            </ul>
        </li>
        <li><span></span>第一级菜单2
            <ul class='sec'>
                <li>第二级菜单1</li>
                <li>第二级菜单2</li>
                <li>第二级菜单3</li>
                <li>第二级菜单4</li>
                <li>第二级菜单5</li>
            </ul>
        </li>
        <li><span></span>第一级菜单3
            <ul class='sec'>
                <li>第二级菜单1</li>
                <li>第二级菜单2</li>
                <li>第二级菜单3</li>
                <li>第二级菜单4</li>
                <li>第二级菜单5</li>
            </ul>
        </li>
        <li><span></span>第一级菜单4
            <ul class='sec'>
                <li>第二级菜单1</li>
                <li>第二级菜单2</li>
                <li>第二级菜单3</li>
                <li>第二级菜单4</li>
                <li>第二级菜单5</li>
            </ul>
        </li>
        <li><span></span>第一级菜单5
            <ul class='sec'>
                <li>第二级菜单1</li>
                <li>第二级菜单2</li>
                <li>第二级菜单3</li>
                <li>第二级菜单4</li>
                <li>第二级菜单5</li>
            </ul>
        </li>
        <li><span></span>第一级菜单6
            <ul class='sec'>
                <li>第二级菜单1</li>
                <li>第二级菜单2</li>
                <li>第二级菜单3</li>
                <li>第二级菜单4</li>
                <li>第二级菜单5</li>
            </ul>
        </li>
    </ul>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
    $(function () {
        /*当点击第一级的li的时候,让对应的ul使用动画切换*/
        $('.first>li').click(function () {
//            $(this).children('.sec').stop().slideToggle();
//            /*让当前的li对应的兄弟节点的ul隐藏*/
//            $(this).siblings().children('.sec').slideUp();
            /*因为获取子节点后对应的方法调用的对象已经发生了改变
            * 所以我们不能直接使用链式调用,我们可以在上一方法调用完成后,
            * 返回上一个对象,通过end()*/
            $(this).children('.sec').stop().slideToggle().end().siblings().children('.sec').slideUp();
            /*让对应的span旋转,只需要给它切换类它的兄弟节点移出类*/
            $(this).toggleClass('cur').siblings().removeClass('cur');
        })
    })
</script>


</body>
</html>